<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="head">
				<view class="left">
					<image class="img-tz" src="../../../static/ring/chart/tizheng.png" mode=""></image>
					<image class='img-tip' src="../../../static/ring/tipinfo.png" mode=""></image>
				</view>
				<image class="right-arrow-icon" src="/static/icon/right.svg" mode="widthFix" @click="gotoDataPage">
				</image>
			</view>
			<view class="refresh-tip">点击刷新按钮开始测量体征</view>
			<!-- 数据行：心率 + 血氧 -->
			<view class="data-row">
				<view class="data-item">
					<view class="top">
						<text class="data-label">最新心率</text>
						<image class="refresh-icon" src="/static/icon/refresh.svg" mode="widthFix"
							@click="toSync('heartBeat')"></image>
					</view>
					<view class="valinfo">

						<text class="data-value">{{ heartRate }}</text><text class="refresh-tip2"> 次/分钟</text>
						<view class="refresh-tip2">{{ heartRateTime }}</view>
					</view>

				</view>
				<view class="" style="width:14rpx">

				</view>
				<view class="data-item">
					<view class="top">

						<text class="data-label">实时血氧</text>
						<image class="refresh-icon" src="/static/icon/refresh.svg" mode="widthFix"
							@click="toSync('bloodOxygen')"></image>
					</view>
					<view class="valinfo">

						<text class="data-value">{{ bloodOxygen }} </text><text class="refresh-tip2">%</text>
						<view class="refresh-tip2">{{ bloodOxygenTime }}</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHeatBeatData,
		getBloodData
	} from "@/api/ring/report.js";
	import dayjs from "dayjs";
	import store from "@/store/index.js";

	export default {
		props: {
			date: String,
		},
		data() {
			return {
				// 实时心率
				heartRate: '--',
				heartRateTime: '',
				// 实时血氧
				bloodOxygen: '--',
				bloodOxygenTime: '',
			};
		},

		computed: {
			isLogin() {
				return store.state.userToken;
			},
		},
		mounted() {
			this.updateHeatData();
			this.updateBloodData();
		},
		methods: {
			getTitle() {
				return 'activity';
			},
			gotoDataPage() {
				const date = dayjs().format("YYYY-MM-DD");
				// 如果是今天 且同步时间不同 意味着今天没有对应的同步数据
				uni.navigateTo({
					url: `/pages/ring/detail/index?type=Heart&title=体征&date=` + date
				});
			},
			// 刷新事件（可通知父组件调接口）
			handleRefresh(type) {
				// this.$emit('onRefresh', type);
				return uni.showToast({
					title: "敬请期待:" + type,
					icon: "none",
				});
			},
			updateHeatData(date) {
				if (!this.isLogin) return;
				date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
				getHeatBeatData({
						dateStr: dayjs(date).format("YYYY-MM-DD"),
						offsetMinutes: new Date().getTimezoneOffset(),
					})
					.then((res) => {
						console.log("====getHeatBeatData====", res.data);
						this.heartRate = res.data.value;
						this.heartRateTime = res.data.dateTimeFormat;
					})
					.catch((error) => console.log(error));
			},
			updateBloodData(date) {
				if (!this.isLogin) return;
				date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
				getBloodData({
						dateStr: dayjs(date).format("YYYY-MM-DD"),
						offsetMinutes: new Date().getTimezoneOffset(),
					})
					.then((res) => {
						console.log("====getBloodData====", res.data);
						this.bloodOxygen = res.data.value;
						this.bloodOxygenTime = res.data.dateTimeFormat;
					})
					.catch((error) => console.log(error));
			},
			showTips() {
				uni.showToast({
					title: "这里是体征数据的相关说明内容",
					icon: "none",
				});
			},
			toSync(type) {
				const ringUser = store.state.ringUser;
				if (ringUser.lastUpDateTime) {
					const last = dayjs(ringUser.lastUpDateTime);
					const interval = dayjs().diff(last, "seconds");
					if (interval <= 30)
						return uni.showToast({
							title: "同步频繁，请稍候",
							icon: "none",
						});
				}

				this.$nextTick(() => {
					this.$store.dispatch("ringDataManage/syncData");
					this.$emit("onSync");
				});
				if (type === "heartBeat") {
					this.updateHeatData()
				} else if (type === "bloodOxygen") {
					this.updateBloodData()
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.chart_box {
		width: 100%;
		height: 100%;
		color: black;

		.w-70rpx {
			width: 70rpx;
		}

		.w-40rpx {
			width: 40rpx;
		}

		.chart_container {
			padding: 30rpx;

			.head {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 8rpx;

				.left {
					flex: 1;
					display: flex;
					align-items: center;

					.img-tz {
						width: 104rpx;
						height: 44rpx;
						margin-right: 12rpx;
					}

					.img-tip {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.right-arrow-icon {
					width: 20rpx;
					height: 20rpx;
				}


			}

			.refresh-tip {
				font-size: 24rpx; // 增大文字提示的字体大小
				color: rgba(153, 153, 153, 1);
				margin-top: 4rpx;
				margin-bottom: 28rpx;
			}

			.data-row {
				display: flex;
			}

			.data-item {
				flex: 1;
				background: #D0E5F8;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 0.5);
				padding: 20rpx;
				padding-left: 30rpx;



				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.data-label {
						font-size: 24rpx;
						color: #333;
						font-weight: 500;
					}

					.refresh-icon {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.valinfo {

					.data-value {
						font-size: 40rpx;
						color: rgba(0, 0, 0, 1);
						font-weight: bold;
						padding-right: 10rpx
					}

					.refresh-tip2 {
						color: rgba(102, 102, 102, 0.5);
						font-size: 20rpx;
					}
				}
			}





		}
	}

	/* 外层卡片 */
	.vital-signs-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 头部区域 */
	.vital-header {
		display: flex;
		flex-direction: column;
		margin-bottom: 12rpx;
	}

	.vital-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff5722;
		margin-bottom: 4rpx;
	}

	.vital-time {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.refresh-desc {
		font-size: 22rpx;
		color: #666;
	}
</style>